<script>
  export default {
    name:'',
    data () {
      return {
      }
    },
    mounted(){
      // 百度地图API功能
      var map = new BMap.Map("fli");
      var centerPointer = new BMap.Point(120.770, 31.160);
      map.centerAndZoom(centerPointer, 9);
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());    
      map.addControl(new BMap.OverviewMapControl());    
      map.addControl(new BMap.MapTypeControl());  
      map.addControl(new BMap.GeolocationControl());

      var point = new BMap.Point(121.4763, 31.2253);
      var marker = new BMap.Marker(point);
      marker.setLabel(getNumberLabel(1));
      marker.setTitle("复兴公园店");
      map.addOverlay(marker);

      var point2 = new BMap.Point(121.5054, 31.2700);
      var marker2 = new BMap.Marker(point2);
      marker2.setLabel(getNumberLabel(2));
      marker2.setTitle("瑞虹新城店");
      map.addOverlay(marker2);


      var point3 = new BMap.Point(121.517305,31.309882);
      var marker3 = new BMap.Marker(point3);
      marker3.setLabel(getNumberLabel(3));
      marker3.setTitle("杨浦五角场店");
      map.addOverlay(marker3);

      var point4 = new BMap.Point(121.323436,31.318354);
      var marker4 = new BMap.Marker(point4);
      marker4.setLabel(getNumberLabel(4));
      marker4.setTitle("南翔五彩城店");
      map.addOverlay(marker4);

      var point5 = new BMap.Point(121.377176,31.176562);
      var marker5 = new BMap.Marker(point5);
      marker5.setLabel(getNumberLabel(5));
      marker5.setTitle("上海万象城店");
      map.addOverlay(marker5);

      var point6 = new BMap.Point(121.401561,31.201449);
      var marker6 = new BMap.Marker(point6);
      marker6.setLabel(getNumberLabel(6));
      marker6.setTitle("古北店");
      map.addOverlay(marker6);

      var point7 = new BMap.Point(121.517686,31.246566);
      var marker7 = new BMap.Marker(point7);
      marker7.setLabel(getNumberLabel(7));
      marker7.setTitle("陆家嘴店");
      map.addOverlay(marker7);

      var point8 = new BMap.Point(121.46349,31.19005);
      var marker8 = new BMap.Marker(point8);
      marker8.setLabel(getNumberLabel(8));
      marker8.setTitle("绿地缤纷城店");
      map.addOverlay(marker8);

      var point9 = new BMap.Point(121.401845,31.228396);
      var marker9 = new BMap.Marker(point9);
      marker9.setLabel(getNumberLabel(9));
      marker9.setTitle("长风大悦城店");
      map.addOverlay(marker9);

      var point10 = new BMap.Point(121.594143,31.250604);
      var marker10 = new BMap.Marker(point10);
      marker10.setLabel(getNumberLabel(10));
      marker10.setTitle("碧云店");
      map.addOverlay(marker10);

      
      var point11 = new BMap.Point(120.276479,30.187951);
      var marker11 = new BMap.Marker(point11);
      marker11.setLabel(getNumberLabel(11));
      marker11.setTitle("杭州华润万象城");
      map.addOverlay(marker11);

      var point12 = new BMap.Point(120.174,30.193);
      var marker12 = new BMap.Marker(point12);
      marker12.setLabel(getNumberLabel(12));
      marker12.setTitle("杭州宝龙城市广场");
      map.addOverlay(marker12);



      var point13 = new BMap.Point(120.905538,31.975958);
      var marker13 = new BMap.Marker(point13);
      marker13.setLabel(getNumberLabel(13));
      marker13.setTitle("江苏南通中南店");
      map.addOverlay(marker13);

      map.enableScrollWheelZoom(true);

      // var markers = [marker, marker2, marker3, marker4, marker5, marker6, marker7, marker8, marker9, marker10, marker11, marker12, marker13];
      // var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

      // for(var i in pointList) {
      //   var marker = new BMap.Marker(pointList[i])
      //   marker.setLabel(getNumberLabel(i));
      //   map.addOverlay(marker); 
      // }

      
 
      function getNumberLabel(number) {
        var offsetSize = new BMap.Size(0, 0);
        var labelStyle = {
          color: "#fff",
          backgroundColor: "0.05",
          border: "0"
        };
 
        //不同数字长度需要设置不同的样式。
        switch((number + '').length) {
            case 1:
                labelStyle.fontSize = "14px";
                offsetSize = new BMap.Size(4, 2);
                break;
            case 2:
                labelStyle.fontSize = "12px";
                offsetSize = new BMap.Size(2, 4);
                break;
            case 3:
                labelStyle.fontSize = "10px";
                offsetSize = new BMap.Size(-2, 4);
                break;
            default:
                break;
        }
 
        var label = new BMap.Label(number, {
            offset: offsetSize
        });
        label.setStyle(labelStyle);
        return label;
      }
    }
  }
</script> 

<template>
  <div class="about-page">
    
    <img src="../../static/images/about-banner.jpg" style="display: block; width: 100%">

    <div class="block container text-center">
      <h1 class="block-title about-block-title">关于我们</h1>
      <div class="description">
        <p style="font-size: 20px;">“人马君”源于“人鱼线VS马甲线”，象征着美好体型和健康生活方式。 </p>
        <p style="width: 540px; margin: 0 auto;">“改变的不只是身材”—【人马君】希望帮助更多的朋友领略到运动健身的魅力，步入健康生活的大门，在这个熙熙攘攘的世界里，找到属于自己的崭新而积极的生活节奏，摆脱亚健康，练就美好身材。</p>
        <img src="../../static/images/jeff.png" style="display: block; margin: 10px auto 60px;">
        <p style="width: 540px; margin: 0 auto;">创始人Jeff在三年前第一次接触健身，3个月简单的坚持让他彻底爱上了健身生活：“健身不仅改变了我的体型，甚至改变了我的心态，我的精神面貌乃至生活方式和世界观。”</p>
      </div>
    </div>
    <div class="scale-block-title text-center">
      <div class="">我们的规模
        <img src="../../static/images/scale-icon.png" style="display: block; margin: 15px auto 0; width: ">
      </div>
    </div>

    <div class="block container scale-block">
      <img src="../../static/images/scale-box.png" style="display: block; width: 880px; margin: 0 auto;">
    </div>

    <div class="effect-block-title text-center">
      <div class="">核心影响力
        <img src="../../static/images/effect-icon.png" style="display: block; margin: 15px auto 0; width: ">
      </div>
    </div>

    <div class="effect-box ">
      <div class="box clearfix">
        <div class="effect-item text-center">
          <div class="title">独特的战略</div>
          <p>线上发展<br>至线下的<br>唯一<br>健身机构</p>
          <div class="black-line"></div>
        </div>
        <div class="effect-item text-center">
          <div class="title">坚挺的用户</div>
          <p>百万级<br>活跃用户<br>和<br>忠实粉丝</p>
          <div class="black-line"></div>
        </div>
        <div class="effect-item text-center">
          <div class="title">前卫的领袖</div>
          <p>互联网精英<br>精英教练<br>网络红人<br>创业精英</p>
          <div class="black-line"></div>
        </div>
        <div class="effect-item text-center">
          <div class="title">清晰品牌定位</div>
          <p>年轻时尚<br>高端<br>前卫的<br>品牌形象</p>
          <div class="black-line"></div>
        </div>
        <div class="effect-item text-center">
          <div class="title">别于传统的产品</div>
          <p>以效果为导向的<br>创新授课模式<br>有别于<br>传统健身房</p>
          <div class="black-line"></div>
        </div>
      </div>
    </div>

    <div class="contact-us-wrap clearfix">
      <div class="box pull-left text-right">
        <img src="../../static/images/contact-us.png" style=""/>
        <div class="description">
          <div style="font-size: 30px; margin-top: 30px; margin-bottom: 20px;">联系我们</div>
          <div class="data">
            <span style="font-size: 41px; font-weight: 600; position: relative; top: 5px;">400-186-1101</span>
            <p style="font-size: 17px; color: #000000;">欲获得更多健身资讯，请关注人鱼线VS马甲线</p>
            <p style="font-size: 15px;"><a href="http://weibo.com/ryxmjx" >微博：人鱼线vs马甲线</a>  |  微信：人鱼线vs马甲线 </p>
          </div>
          <img src="../../static/images/qr-code.png" class="qrcode-img">
        </div>
      </div>
     
      <!-- <baidu-map class="map pull-left" ak="Mt0BcYs4pY9I09sR2EWEdxmPMgRNlOyA">
      </baidu-map>-->
      <!--地图容器-->
      <div id="fli" class="fli map pull-left"></div>
    </div>

    <div class="site-wrap container text-center">
      <div class="site-block-title"><img src="../../static/images/store.png" style="width: 48px; vertical-align: middle;">&nbsp;人马君门店</div>
      <div class="clearfix text-left">
        <div class="item-label pull-left">上海&nbsp;&nbsp;|</div>
        <div class="item-inner">
          <a href="javascript:void(0);" class="site-item">瑞虹店</a><a href="javascript:void(0);" class="site-item">复兴公园店</a><a href="javascript:void(0);" class="site-item">五角场店</a><a href="javascript:void(0);" class="site-item">南翔店</a><a href="javascript:void(0);" class="site-item">长风大悦城店</a><a href="javascript:void(0);" class="site-item">万象城店</a><a href="javascript:void(0);" class="site-item">古北店</a><a href="javascript:void(0);" class="site-item">陆家嘴店</a><a href="javascript:void(0);" class="site-item">绿地缤纷城店</a><a href="javascript:void(0);" class="site-item">碧云店</a>
        </div>
      </div>
      <div class="clearfix text-left">
        <div style="display: inline-block; width: 50%;">
          <div class="item-label pull-left">浙江&nbsp;&nbsp;|</div>
          <div class="item-inner">
            <a href="javascript:void(0);" class="site-item">杭州万象汇店</a><a href="javascript:void(0);" class="site-item">杭州宝龙城店</a>
          </div>
        </div>
        <div style="display: inline-block;">
          <div class="item-label pull-left">江苏&nbsp;&nbsp;|</div>
          <div class="item-inner">
            <a href="javascript:void(0);" class="site-item">南通店</a>
          </div>
        </div>
        
      </div>
      
    </div>


    
    <!-- <div class="wish block container">
      
      <div id="header" class="block-header">
        <h1 class="title">人马君愿景</h1>
        <p class="wsubtitle">为人类美好的肉体和灵魂奋斗</p>
      </div>

      <div class="block-body clearfix">
        <img src="../../static/images/course-banner.png">
        <div class="right">
          <h2>“人马君”源于“人鱼线VS马甲线”，象征着美好体型和健康生活方式。</h2>
          <p>改变的不只是身材”—“人马君”希望帮助更多的朋友领略到运动健身的魅力，步入健康生活的大门，在这个熙熙攘攘的世界里，找到属于自己的崭新而积极的生活节奏，摆脱亚健康，练就美好身材。</p>
          <div class="sub-info">
            <p>创始人Jeff在三年前第一次接触健身，3个月简单的坚持让他彻底爱上了健身生活：“健身不仅改变了我的体型，甚至改变了我的心态，我的精神面貌乃至生活方式和世界观。”</p>
            <img src="../../static/images/jeff.png" style="width: auto;top: -8px;height: 265px;">
          </div>
        </div>
      </div>

    </div>

    <div class="scale block container">
      
      <div class="block-header">
        <h1 class="title">我们的规模</h1>
        <p class="subtitle">OUR SCALE</p>
      </div>

      <div class="block-body clearfix">
        <ul class="clearfix">
          <li class="no-top no-left"><img src="../../static/images/scale-1.png" alt=""></li>
          <li class="no-top"><img src="../../static/images/scale-2.png" alt=""></li>
          <li class="no-top no-right"><img src="../../static/images/scale-3.png" alt=""></li>
          <li class="no-bottom no-left"><img src="../../static/images/scale-4.png" alt=""></li>
          <li class="no-bottom"><img src="../../static/images/scale-5.png" alt=""></li>
          <li class="no-bottom no-right"><img src="../../static/images/scale-6.png" alt=""></li>
        </ul>
      </div>

    </div>

    <div class="influence block container">
      
      <div class="block-header">
        <h1 class="title">健身行业绝对的影响力</h1>
        <p class="subtitle">ABSOLUTE INFLUENCE</p>
      </div>

      <div class="block-body clearfix">
        <ul class="clearfix">
          <li>
            <img src="../../static/images/influence-1.png" alt="">
          </li>
          <li>
            <img src="../../static/images/influence-2.png" alt="">
          </li>
          <li>
            <img src="../../static/images/influence-3.png" alt="">
          </li>
          <li>
            <img src="../../static/images/influence-4.png" alt="">
          </li>
          <li>
            <img src="../../static/images/influence-5.png" alt="">
          </li>
        </ul>
      </div>

    </div>

    <div id="us" class="contact-warp">
      <div class="contact block container" style="padding: 40px 0 135px;">
      
        <div class="block-header">
          <h1 class="title">联系我们</h1>
          <p class="subtitle">CONTACT US</p>
        </div>

        <div class="block-body clearfix">
          <img src="../../static/images/qr-code.png" alt="">
          <div class="right-block">
            <p class="phone">
              <span>课程咨询请拨打</span><br>
              <span class="phone-number">400-186-1101</span>
            </p>
            <p class="info">
              <span>欲获得更多健身咨询，请关注人鱼线VS马甲线</span>
              微博：<a href="http://weibo.com/ryxmjx">人鱼线VS马甲线</a>&nbsp;&nbsp;&nbsp;
              微信：人鱼线VS马甲线
            </p>
          </div>
        </div>
        <div style="max-width: 780px; font-size: .7rem; color: #bfbfbf; line-height: 24px; margin: 20px auto 0;">
          <p style="width: 38%; text-align: right;margin: 0px; color: #fbd700;">门&nbsp;&nbsp;店&nbsp;&nbsp;地&nbsp;&nbsp;址：</p>
          <div style="width: 38%; float: left; text-align: right;">
            <p style="margin: 0;">黄浦复兴公园店：黄浦区雁荡路99号璞邸精品酒店3楼</p>
            <p style="margin: 0;">杨浦五角场店：上海市杨浦区锦嘉路50-52号</p>
            <p style="margin: 0;">闵行万象城店：吴中路1799号万象城L304</p>
            <p style="margin: 0;">长宁古北店：荣华东道116号</p>

          </div>
          <div style="width: 57%; float: right; text-align: left">
            <p style="margin: 0;">虹口瑞虹店： 虹口区瑞虹路188号月亮湾LG层01~02室</p>
            <p style="margin: 0;"> 南翔五彩城店：上海市嘉定区南翔镇宝翔路801号华润五彩城G118单元</p>
            <p style="margin: 0;"> 浦东陆家嘴店：银城路66号尚悦湾L308-309</p>
            <p style="margin: 0;"> 徐汇滨江店：上海市徐汇区龙华中路759号绿地缤纷城5层WA-501</p>
            <p style="margin: 0;">江苏南通店：江苏省南通市中南世纪城13幢1单元107</p>

          </div>
          
        </div>
      </div>
      
    </div>-->

  </div>
</template>

<style>
  @import '../../static/styles/about.css';
</style>
